<template>
	<Header title="地址管理"/>
	<van-address-list
		v-model="chosenAddressId"
		:list="data.list"
		default-tag-text="默认"
		@add="onAdd"
		@edit="onEdit"
	/>

</template>

<script setup>
	import { onMounted, reactive } from 'vue';
	import Header from '../../components/Header.vue'
	import { useStore } from 'vuex';
	import { useRouter } from 'vue-router';
	
	const store = useStore()
	const router = useRouter()
	
	const data = reactive({
		list: []
	})
	
	const onAdd = () => {
		router.push({
			path: '/addressedit',
			query: {
				type: 'add'
			}
		})
	}
	
	const onEdit = (item) => {
		router.push({
			path: '/addressedit',
			query: {
				id: item.id,
				type: 'edit'
			}
		})
	}
	
	//初始化地址列表
	const init = () => {
		data.list = store.state.userAddress.map((item)=>{
			return {
				id: item.id,
				name: item.name,
				tel: item.tel,
				address: `${item.province}${item.city}${item.county}${item.addressDetail}`,
				isDefault: item.isDefault
			}
		})
	}
	
	onMounted(()=>{
		init()
	})
</script>

<style lang="less" scoped>
	/deep/ .van-button--danger {
	  background-color: #ffc400;
	  border-color: #ffc400;
	}
	/deep/ .van-switch--on {
	  background-color: #ffc400;
	}
	/deep/ .van-radio__icon {
	  display: none;
	}
</style>